<template>
  <div class="top">
    <el-card>
      <div class="scdiv">
        <div>
          <el-form :inline="true">
            <el-form-item>
              <el-input placeholder="请输入" v-model="keyword"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                icon="el-icon-search"
                @click="handleQuery"
                >搜 索</el-button
              >
            </el-form-item>
          </el-form>
        </div>
        <div>
          <download-excel :data="tableData" :fields="excel" name="成绩表">
            <el-button type="success" icon="el-icon-upload2">导出</el-button>
          </download-excel>
        </div>
        <div style="margin-left: 10px">
          <el-button type="success" class="cobutton" @click="handleAdd"
            >添 加 成 绩</el-button
          >
        </div>
      </div>
    </el-card>
    <el-card>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="selection" width="55"></el-table-column>
         <el-table-column label="序号" width="100" align="center">
          <template slot-scope="scope">{{ scope.$index + 1 }}</template>
        </el-table-column>
        <el-table-column
          label="学期"
          align="center"
          property="semesterName"
        ></el-table-column>
        <el-table-column
          label="姓名"
          align="center"
          property="studentName"
        ></el-table-column>
        <el-table-column
          label="班级"
          align="center"
          property="className"
        ></el-table-column>
        <el-table-column
          label="课程名"
          align="center"
          property="courseName"
        ></el-table-column>
        <el-table-column
          label="分数"
          align="center"
          property="score"
        ></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="warning"
              @click="handleEdit(scope.$index, scope.row)"
              >编辑
            </el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div>
        <el-dialog title="编辑" :visible.sync="dialogFormVisible">
          <el-form :model="form" :rules="rules" ref="formDemo">
            <el-form-item
              label="学期:"
              :label-width="formLabelWidth"
              prop="semesterName"
            >
              <el-select v-model="form.semesterName" placeholder="请选择学期">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="姓名:"
              :label-width="formLabelWidth"
              prop="studentName"
            >
              <el-select v-model="form.studentId" placeholder="请选择姓名">
                <el-option
                  v-for="(item, index) in studentInfo"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="班级:"
              :label-width="formLabelWidth"
              prop="className"
            >
              <el-select v-model="form.classId" placeholder="请选择班级">
                <el-option
                  v-for="(item, index) in classInfo"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="课程名:"
              :label-width="formLabelWidth"
              prop="courseName"
            >
              <el-select v-model="form.subjectId" placeholder="请选择课程名">
                <el-option
                  v-for="(item, index) in courseInfo"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="分数:"
              :label-width="formLabelWidth"
              prop="score"
            >
            <el-input v-model="form.score"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="handleCancel">取 消</el-button>
            <el-button type="primary" @click="handleSave">确 定</el-button>
          </div>
        </el-dialog>
      </div>
      <div></div>
    </el-card>
  </div>
</template>

<script>
import { GetStudentList } from "@/api/studentapi";
import { getCourseList } from "@/api/courseapi";
import { getClassList } from "@/api/classapi";
import {
  addScore,
  delScore,
  editScore,
  getScoreList,
} from "@/api/grades";
export default {
  data() {
    return {
      excel: {
        学期: "semesterName",
        姓名: "studentName",
        班级: "className",
        课程名: "courseName",
        分数: "score",
      },
      keyword: "",
      options:[
        {
            value:'第一学期',
            label:'第一学期'
        },
         {
            value:'第二学期',
            label:'第二学期'
        },
         {
            value:'第三学期',
            label:'第三学期'
        },
         {
            value:'第四学期',
            label:'第四学期'
        },
         {
            value:'第五学期',
            label:'第五学期'
        },
         {
            value:'第六学期',
            label:'第六学期'
        },

      ],
      tableData: [],
      // 获取学生学号
      studentInfo: [],
      // 获取课程表id
      courseInfo: [],
      // 获取班级id
      classInfo: [],
      dialogFormVisible: false,
      formLabelWidth: "120px",
      form: {
        semesterName: "",
        studentId: "",
        classId: "",
        subjectId: "",
        score: "",
      },
      rules: {
        score: [
          {
            required: true,
            trigger: "blur",
            message: "分数不能为空",
          },
        ],
      },
    };
  },
  mounted() {
    this.getStudent();
    this.getClass();
    this.getCourse();
    this.getList();
  },
  methods: {
    // 获取学生列表信息
    getCourse() {
      getCourseList().then((res) => {
        res.data.forEach((item) => {
          var obj = {
            label: item.course.courseName,
            value: item.course.id,
          };
          this.courseInfo.push(obj);
        });
      });
    },
    // 获取学生列表信息
    getStudent() {
      GetStudentList().then((res) => {
        res.data.forEach((item) => {
          var obj = {
            label: item.studentInfo.studentName,
            value: item.studentInfo.id,
          };
          this.studentInfo.push(obj);
        });
      });
    },
    // 获取班级列表信息
    getClass() {
      getClassList().then((res) => {
        res.data.forEach((item) => {
          var obj = {
            label: item.classinfo.className,
            value: item.classinfo.id,
          };
          this.classInfo.push(obj);
        });
      });
    },
    getList() {
      let params = {
        keyword: this.keyword,
      };
      this.tableData = [];
      getScoreList(params).then((res) => {
        console.log(res);
        res.data.forEach((item) => {
          var obj = {
            id: item.scoreInfo.id,
            score: item.scoreInfo.score,
            className: item.classInfo.className,
            courseName: item.courseInfo.courseName,
            studentName: item.studnetInfo.studentName,
            semesterName:item.termInfo.termName,
            studentId:item.studnetInfo.id,
            classId:item.classInfo.id,
            subjectId:item.courseInfo.id,
          };
          this.tableData.push(obj);
        });
      });
    },
    handleQuery() {
      this.getList();
      this.$message.success("请求成功")
    },
    handleAdd() {
      this.dialogFormVisible = true;
      this.form.id = 0;

      this.form.score = "";
      this.form.studentId = "";
      this.form.semesterName = "";
      this.form.subjectId = "";
      this.form.classId = "";
    },
    handleEdit(index, row) {
      // console.log(row);
      this.dialogFormVisible = true;

      this.form.id = row.id;
      this.form.score = row.score;
      this.form.studentId = row.studentId;
      this.form.semesterName = row.semesterName;
      this.form.subjectId = row.subjectId;
      this.form.classId = row.classId;
      
      this.form.currentIndex = index;
      console.log(this.form);
    },
    handleCancel() {
      this.dialogFormVisible = false;
    },
     // 保存
   handleSave() {
      this.$refs.formDemo.validate(async (valid) => {
        console.log(this.form);
        if (!valid) return;
        // 如果表单中的id为0，则认为是添加用户，反之则为修改用户
        if (this.form.id === 0) {
          addScore(this.form)
            .then((res) => {
              console.log(res);
              if (res.code === 200) {
                //将新添加的数据push到现有表数据的最后面
                this.tableData.push(res.data);
                this.$message.success(res.msg);
                this.$router.go(0)
              } else {
                this.$message.error(res.msg);
              }
            })
            .catch((err) => {
              console.log(err);
            });
          this.dialogFormVisible = false;
        } else {
          editScore(this.form.id, this.form)
            .then((res) => {
              console.log(res);
                this.tableData.splice(this.currentIndex, 1, res.data);
                this.$message.success(res.msg);
                this.$router.go(0)
            })
            .catch((err) => {
              console.log(err);
            });
          this.dialogFormVisible = false;
        }
      });
    },
    // 删除
    handleDelete(index, row) {
      // 删除时获得当前表数组中的下标
      this.currentIndex = index;
      // 弹框提示
      this.$confirm("此操作将永久删除该课程, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          delScore(row.id).then((res) => {
            if (res.code === 200) {
              this.tableData.splice(index, 1);
              this.$message.success("删除成功");
            } else {
              this.$message({
                type: "error",
                message: "删除失败",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>
<style>
.scdiv {
  display: flex;
  float: left;
}
.daochu {
  margin-top: 1px;
}
.scfenye {
  margin-top: 30px;
  margin-bottom: 10px;
}
</style>